<template>
  <div>
    <!-- 入职 -->
    <div>
      
    </div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">试卷中心</div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="试卷名称">
        <el-input
          v-model="queryParams.paperName"
          placeholder="试卷名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="试卷类型">
            <el-select v-model="queryParams.paperType" placeholder="请选择试卷类型">
                <el-option v-for="(item, index) in paperType" :label="item.codeName" :value="item.codeValue" :key="index"></el-option>
            </el-select>
        </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="initSearchPapers"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="papers"
      height="590"
    >
      <el-table-column
        prop="paperId"
        label="试卷编号"
      >
      </el-table-column>
      <el-table-column
        prop="paperName"
        label="试卷名称"
      >
      </el-table-column>
      <el-table-column
        prop="paperType"
        label="试卷类型"
      >
      <template slot-scope="scope">
        {{ parsePaperType(scope.row.paperType)}}
      </template>
      </el-table-column>
      <el-table-column
        prop="paperScore"
        label="试卷分数"
      >
      </el-table-column>
      <el-table-column
        prop="winScore"
        label="通过分数"
      >
      </el-table-column>
      <el-table-column
        prop="limitTime"
        label="答题时间"
      >
      <template slot-scope="scope">
        {{ parseLimitTime(scope.row.limitTime) }}
      </template>
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="editHandle(scope.row)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteHandle(scope.row)"
          >删除</el-button>
          <el-button
            type="text"
            size="small"
            @click="showPractices(scope.row)"
          >查看练习</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.total"
      @prev-click="preHandle"
      @next-click="nextHandle"
      @current-change="currentChangeHandle"
    >
    </el-pagination>

    <el-drawer
      title="修改试卷"
      :visible.sync="editPaperWindowKey"
      >
      <el-form :model="newPaper" label-width="80px">
        <el-form-item label="试卷编号">
          <el-input disabled v-model="newPaper.paperId"></el-input>
        </el-form-item>
        <el-form-item label="试卷名称">
          <el-input v-model="newPaper.paperName"></el-input>
        </el-form-item>
        <el-form-item label="试卷类型">
          <el-select v-model="queryParams.paperType" placeholder="请选择试卷类型">
                <el-option v-for="(item, index) in paperType" :label="item.codeName" :value="item.codeValue" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="试卷分数">
          <el-input v-model="newPaper.paperScore"></el-input>
        </el-form-item>
        <el-form-item label="通过分数">
          <el-input v-model="newPaper.winScore"></el-input>
        </el-form-item>
        <el-form-item label="答题时间">
          <el-input v-model="newPaper.formatTime"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changePaperHandle">确定</el-button>
          <el-button @click="editPaperWindowKey = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog
      title="练习"
      :visible.sync="showPaperPracitce"
      width="70%">
      <paper-practices :paperPractice="currentPractices"></paper-practices>
    </el-dialog>
  </div>
</template>
<script>
import { getConfig, parseConfig, queryPapers, queryPaperPractice, editPaper, deletePaper } from '@/api/system/system';
import PaperPractices from '@/components/PaperPractices.vue'
export default {
  components: {
    PaperPractices
  },
  data() {
    return {
      editPaperWindowKey: false,
      showPaperPracitce: false,
      papers: [],
      queryParams: {
        paperName: '',
        paperType: '',
        current: 1,
        pageSize: 10
      },
      pageData: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      currentPractices: {},
      newPaper: {
        paperId: '',
        paperName: '',
        paperType: '',
        paperScore: '',
        winScore: '',
        limitTime: 0,
        formatTime: 0
      },
      paperType: []
    }
  },
  async mounted() {
    this.initSearchPapers()
    const {data: paperTypeRes} = await getConfig({codeType: 'PAPER_TYPE', codeValue: ''})
    if (paperTypeRes.code === 200) {
      this.paperType = paperTypeRes.data.cache
    }
  },
  computed: {
    parsePaperType() {
      return function(type) {
        return parseConfig(this.paperType, String(type))
      }
    },
    parseLimitTime() {
      return function(limitTime) {
        if (limitTime && limitTime > 0) {
          var min = limitTime / 1000 / 60
          if (min && min > 1) {
            return min + " 分钟"
          }
        }
        return "未指定"
      }
    }
  },
  methods: {
    async changePaperHandle() {
      this.newPaper.limitTime = parseInt(this.newPaper.formatTime) * 1000 * 60
      const {data: res} = await editPaper(this.newPaper)
      if (res.code === 500) {
        this.$message.error(res.message)
      }
      this.editPaperWindowKey = false
      this.searchPapers()
    },
    preHandle(current) {
      this.currentChangeHandle(current)
    },
    nextHandle(current) {
      this.currentChangeHandle(current)
    },
    currentChangeHandle(current) {
      this.pageData.current = current
      this.searchPapers()
    },
    editHandle(row) {
        this.newPaper = {...row, formatTime: this.newPaper.limitTime / 1000 / 60}
        this.editPaperWindowKey = true
    },
    async showPractices(row) {
      const {data: res} = await queryPaperPractice(row.paperId)
      if (res.code === 200) {
        this.currentPractices = res.data.practices
      }
      this.showPaperPracitce = true
    },
    deleteHandle(row) {
      let _this = this
      this.$alert('删除试卷', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.deletePaper(row)
        }).catch(() => {
          _this.$message.success('已取消')
        })
    },
    async deletePaper(row) {
      const {data: res} = await deletePaper(row.paperId)
      if (res.code === 200) {
        this.$message.success("删除成功")
      }
      if (res.code === 500) {
        this.$message.error(res.message)
      }
      this.searchPapers()
    },
    initSearchPapers() {
      this.pageData.current = 1
      this.pageData.pageSize = 10
      this.searchPapers()
    },
    async searchPapers() {
      this.queryParams.current = this.pageData.current
      this.queryParams.pageSize = this.pageData.pageSize
      const {data: res} = await queryPapers(this.queryParams)
      if (res.code === 200) {
        this.papers = res.data.papers.records
        this.pageData.total = res.data.papers.total
      }
    }
  },
}
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>